<template>
	<div class="person">
		<h3>求和为 {{ sum }}</h3>
		
		<h3>姓名: {{ person.name }}</h3>
		<h3>年龄: {{ person.age }}</h3>
		<button @click="addSum()">sum+1</button>
		<button @click="changeName()">修改姓名</button>
		<button @click="changeAge()">修改年龄</button>
		<button @click="changePerson">修改整个人</button>
        <h2>汽车信息：一辆{{ car.brand }}车，它的颜色是：{{ car.option.color }}色, 引擎是: {{ car.option.engine }}</h2>
        <button @click="changeCarPrice">修改汽车价格</button>
        <button @click="changeColor">变换汽车颜色</button>
		<button @click="changeEngine">变换汽车引擎</button>
        <br>
    </div>
</template>

<!-- 
	shallowRef、shallowReactive只会在顶层创建响应式，对深层不做任何处理
	避免对每个内部做响应式带来的性能成本，提高访问速度，提升性能
  -->
<script setup lang="ts" name="App">
	import { ref, shallowRef, reactive, shallowReactive } from 'vue';

	// 使用 shallowRef 定义的数据, 只能修改其第一层，对于对象类型的深层次数据无法修改(对象本体可以修改)
	let sum = shallowRef(0)
	let person = shallowRef({
		'name': '张三',
		'age': 18
	})

	function addSum() {
		sum.value += 1
	}
	function changeName() {
		person.value.name = '李四'
	}
	function changeAge() {
		person.value.age += 1
	}
	function changePerson() {
		person.value = {'name':'王五', 'age':20}
	}

	// shallowReactive 定义的对象只能修改第一层，无法修改深层次内容
	let car = shallowReactive({
		'brand':'奔驰',
		'option':{
			'color': '红',
			'engine': 'V8'
		}
	})

	function changeCarPrice() {
		car.brand = '奥迪'
	}

	function changeColor() {
		car.option.color = '黑'
	}

	function changeEngine() {
		car.option.engine = 'V4'
	}

</script>

<style>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}

li {
    font-size: 20px;
}
</style>